<template>
  <div class="app">
   <div class="left"></div>
   <div class="right">
    <div class="main" >
    
       <div v-show="n=='first'"  >
       <h1>手机号登录</h1>
     <el-form :model="form" label-width="auto" style="max-width: 600px">
     <el-form-item >
       <el-input v-model="form.phone" placeholder="请输入手机号" />
     </el-form-item>
     <el-form-item >
       <el-input v-model="form.password" placeholder="请输入密码" />
     </el-form-item>
     <el-form-item >
       <el-checkbox v-model="form.checked" label=" 用户平台使用协议" size="large" />
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onSubmit" class="login">登入</el-button>
     
     </el-form-item>
   </el-form>
      </div>
   
    
       <div v-show="n=='second'" >
       <h1>二维码登录</h1>
       
     </div>
    
     
 
     
      
       
   
    <div class="other">
 
     <button id="phone" @click="n = 'first'" >手机号登录</button>
     <button id="phone" @click="n = 'second'" >二维码登录</button>
    </div>
    
    </div>
   </div>
  </div>
 </template>
 
 <script lang="ts" setup>
 
 import router from '../router/index'
 import { reactive ,ref,getCurrentInstance,toRefs,watch,} from 'vue'
 import { logina } from '../axios/user'
 
 // 表单数据
 const form = reactive({
   phone: '13800000002',
   password:'hm#qd@23!',
   checked: false,
 })
 const n = ref('first')
 
 const onSubmit = () => {
   const phone=/^(?:(?:\+|00)86)?1\d{10}$/
 if(!phone.test(form.phone)){
   alert('请输入正确的手机号')
   return
 }
 if(form.password.length<6){
   alert('密码长度不能小于6位')
   return
 }
 if(!form.checked){
   alert('请勾选用户平台使用协议')
   return
 }
   // 假设这里是一个登录接口
   let data={
    mobile:form.phone,
     password:form.password
   }
   logina(data).then(res=>{
     if(res.data.success){
      //  alert('登录成功')
       localStorage.setItem('token',res.data.data)
       router.push('/home')
     }
       return
    //  alert('登录成功')
     // 登录成功后跳转到其他页面
     // router.push('/home')
   }).catch(err=>{
     console.error(err)
     alert('登录失败')
   })
 
 }
 
 
 
 
 
 </script>
 
 <style>
 *{
   margin: 0;
   padding: 0;
 }
 .app{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #f5f5f5;
 }
 .left{
   width: 50%;
   height: 98%;
   /* background-color: #fff; */
   background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.efeea7fe9c2700fcff22483246e448db?rik=2GOGPn7eZvqd7A&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0830%2fxiaguang4.jpg&ehk=WiVr1cmj4u7RnOhKcAbAFDCbcnEuMDMJc1g9GVQAoj8%3d&risl=&pid=ImgRaw&r=0);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   border-radius: 25px;
 }
 .right{
   width: 50%;
   height: 100%;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .main{
   width: 80%;
   height: 80%;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   padding: 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 .other{
   display: flex;
   justify-content: space-between;
 }
 #phone{
   width: 45%;
   height: 40px;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   color: #333;
   cursor: pointer;
 }
 #phone:hover{
   background-color: hsl(207, 90%, 47%);
 }
 .active{
   background-color: red;
 }
 .login{
   width: 100%;
   height: 40px;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   color: #333;
   cursor: pointer;
 }
 .el-form-item__label{
   font-size: 18px;
   color: #333;
 }
 .el-form-item__content{
   font-size: 18px;
   color: #333;
 }
 .el-checkbox__label{
   font-size: 14px;
   color: #333;
 }
 .el-checkbox__input.is-checked+.el-checkbox__label{
   color: #333;
 }
 
 .el-checkbox__input.is-checked .el-checkbox__inner{
   background-color: #fff;
   border-color: #fff;
 }
 .el-checkbox__input.is-checked .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-indeterminate .el-checkbox__inner{
   background-color: #fff;
   border-color: #fff;
 }
 .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
   background-color: #333;
 }
 .el-checkbox__input.is-focus .el-checkbox__inner{
   border-color: #fff;
 }
 .el-checkbox__input.is-focus .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
   background-color: #fff;
   border-color: #fff;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{
   background-color: #fff;
   border-color: #fff;
 }
 .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{
   background-color: #333;
 }
 .el-checkbox__input.is-disabled.is-focus .el-checkbox__inner{
   border-color: #fff;
 }
 
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{
   background-color: #333;
 }
 .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
   background-color: #fff;
   border-color: #fff;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
   border-color: #333;
 }
 
 .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-focus .el-checkbox__inner{
   border-color: #fff;
 }
 .el-checkbox__input.is-disabled.is-focus .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{
   background-color: #333;
 }
 .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::after{
   border-color: #333;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
   background-color: #fff;
   border-color: #fff;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
   border-color: #333;
 }
 
 h1{
   margin-bottom: 30px;
 }
 
 </style>